<template>
<div>
  <div>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="订单编号：">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="客户姓名：">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="单位：">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="订单日期：">
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder=""
    >
    </el-date-picker>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">导出到Excel</el-button>
     <el-button type="primary" icon="el-icon-search">搜索</el-button>
     <el-button type="primary" icon="el-icon-refresh-left">重置</el-button>
  </el-form-item>
</el-form>
  </div>
  <p>
  </p>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="未审核" name="first"><el-table
    :data="tableData"
    border
    >
    <el-table-column
      prop="date"
      label="订单编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="单位"
      width="180">
    </el-table-column>
    <el-table-column
      prop="qu"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="khjb"
      label="客户级别">
    </el-table-column>
    <el-table-column
      prop="cjsj"
      label="创建时间">
    </el-table-column>
    <el-table-column
      prop="cplx"
      label="产品类型">
    </el-table-column>
    <el-table-column
      prop="sl"
      label="数量（张）">
    </el-table-column>
    <el-table-column
      prop="je"
      label="金额">
    </el-table-column>
    <el-table-column
      prop="zfzt"
      label="支付状态">
    </el-table-column>
    <el-table-column
      prop="sh"
      label="审核">
    </el-table-column>
    <el-table-column
      prop="cz"
      label="操作">
    </el-table-column>
  </el-table>
  </el-tab-pane>
  <el-tab-pane label="已支付" name="first1"><el-table
    :data="tableData"
    border
    >
    <el-table-column
      prop="date"
      label="订单编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="单位"
      width="180">
    </el-table-column>
    <el-table-column
      prop="qu"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="khjb"
      label="客户级别">
    </el-table-column>
    <el-table-column
      prop="cjsj"
      label="创建时间">
    </el-table-column>
    <el-table-column
      prop="cplx"
      label="产品类型">
    </el-table-column>
    <el-table-column
      prop="sl"
      label="数量（张）">
    </el-table-column>
    <el-table-column
      prop="je"
      label="金额">
    </el-table-column>
    <el-table-column
      prop="zfzt"
      label="支付状态">
    </el-table-column>
    <el-table-column
      prop="sh"
      label="审核">
    </el-table-column>
    <el-table-column
      prop="cz"
      label="操作">
    </el-table-column>
  </el-table></el-tab-pane>
  <el-tab-pane label="未支付" name="first2"><el-table
    :data="tableData"
    border
    >
    <el-table-column
      prop="date"
      label="订单编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="单位"
      width="180">
    </el-table-column>
    <el-table-column
      prop="qu"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="khjb"
      label="客户级别">
    </el-table-column>
    <el-table-column
      prop="cjsj"
      label="创建时间">
    </el-table-column>
    <el-table-column
      prop="cplx"
      label="产品类型">
    </el-table-column>
    <el-table-column
      prop="sl"
      label="数量（张）">
    </el-table-column>
    <el-table-column
      prop="je"
      label="金额">
    </el-table-column>
    <el-table-column
      prop="zfzt"
      label="支付状态">
    </el-table-column>
    <el-table-column
      prop="sh"
      label="审核">
    </el-table-column>
    <el-table-column
      prop="cz"
      label="操作">
    </el-table-column>
  </el-table></el-tab-pane>
  <el-tab-pane label="未通过" name="first3"><el-table
    :data="tableData"
    border
    >
    <el-table-column
      prop="date"
      label="订单编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="单位"
      width="180">
    </el-table-column>
    <el-table-column
      prop="qu"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="khjb"
      label="客户级别">
    </el-table-column>
    <el-table-column
      prop="cjsj"
      label="创建时间">
    </el-table-column>
    <el-table-column
      prop="cplx"
      label="产品类型">
    </el-table-column>
    <el-table-column
      prop="sl"
      label="数量（张）">
    </el-table-column>
    <el-table-column
      prop="je"
      label="金额">
    </el-table-column>
    <el-table-column
      prop="zfzt"
      label="支付状态">
    </el-table-column>
    <el-table-column
      prop="sh"
      label="审核">
    </el-table-column>
    <el-table-column
      prop="cz"
      label="操作">
    </el-table-column>
  </el-table></el-tab-pane>
    <el-tab-pane label="审核完成" name="first4"><el-table
    :data="tableData"
    border
    >
    <el-table-column
      prop="date"
      label="订单编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="单位"
      width="180">
    </el-table-column>
    <el-table-column
      prop="qu"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="khjb"
      label="客户级别">
    </el-table-column>
    <el-table-column
      prop="cjsj"
      label="创建时间">
    </el-table-column>
    <el-table-column
      prop="cplx"
      label="产品类型">
    </el-table-column>
    <el-table-column
      prop="sl"
      label="数量（张）">
    </el-table-column>
    <el-table-column
      prop="je"
      label="金额">
    </el-table-column>
    <el-table-column
      prop="zfzt"
      label="支付状态">
    </el-table-column>
    <el-table-column
      prop="sh"
      label="审核">
    </el-table-column>
    <el-table-column
      prop="cz"
      label="操作">
    </el-table-column>
  </el-table></el-tab-pane>
  </el-tabs>
  </div>
<div>
  <el-pagination
  background
  layout="prev, pager, next"
  :total="50">
</el-pagination>
</div>
</div>

</template>
<script>
  export default {
    data() {
      return {
         radio: '1', 
         activeName: 'second',
        tableData: [{
          date: '2016-05-02',
          name: '',
          address: '',
          qu:'',

        
        }],
         form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
       methods: {
      handleClick() {
        alert('button click');
      },
       handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>




